<template>
  <div class="calculator-container">
    <h2>简易计算器</h2>

    <!-- 输入区域 -->
    <div class="input-group">
      <label>数字1：</label>
      <input
          type="number"
          v-model="num1"
          @input="handleNum1Change"
          placeholder="请输入数字"
      >
    </div>

    <div class="operation-group">
      <label>操作：</label>
      <select v-model="currentOp" @change="handleOpChange">
        <option value="+">+ 加</option>
        <option value="-">- 减</option>
        <option value="*">× 乘</option>
        <option value="/">÷ 除</option>
      </select>
    </div>

    <div class="input-group">
      <label>数字2：</label>
      <input
          type="number"
          v-model="num2"
          @input="handleNum2Change"
          placeholder="请输入数字"
      >
    </div>

    <!-- 按钮区域 -->
    <div class="btn-group">
      <button @click="handleCalculate">计算</button>
      <button @click="handleReset" class="reset-btn">重置</button>
    </div>

    <!-- 结果区域 -->
    <div class="result-group" v-if="result !== null">
      <span>结果：</span>
      <span class="result-value">{{ result }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCalculatorStore } from '../stores/calculator'

// 初始化Store
const store = useCalculatorStore()

// 本地响应式变量（与Store同步）
const num1 = ref(store.num1)
const num2 = ref(store.num2)
const currentOp = ref(store.operation)
const result = ref(store.result)

// 同步数字1到Store
const handleNum1Change = (e) => {
  store.setNum1(e.target.value)
  num1.value = e.target.value // 更新本地变量
}

// 同步数字2到Store
const handleNum2Change = (e) => {
  store.setNum2(e.target.value)
  num2.value = e.target.value // 更新本地变量
}

// 同步操作符到Store
const handleOpChange = (e) => {
  store.setOperation(e.target.value)
  currentOp.value = e.target.value // 更新本地变量
}

// 触发计算
const handleCalculate = () => {
  store.calculate()
  result.value = store.result // 同步结果
}

// 重置计算器
const handleReset = () => {
  store.reset()
  // 同步所有本地变量
  num1.value = store.num1
  num2.value = store.num2
  currentOp.value = store.operation
  result.value = store.result
}
</script>

<style scoped>
.calculator-container {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-group, .operation-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

label {
  width: 80px;
  font-size: 14px;
  color: #333;
}

input, select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.btn-group {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #42b983;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #359e75;
}

.reset-btn {
  background-color: #f56c6c;
}

.reset-btn:hover {
  background-color: #e45e5e;
}

.result-group {
  margin-top: 10px;
  padding: 10px;
  border-top: 1px dashed #eee;
  font-size: 16px;
}

.result-value {
  color: #42b983;
  font-weight: bold;
}
</style>